<template>
  <div>
    <van-swipe class='my-swipe' indicator-color='white' @change='onChange'>
      <van-swipe-item v-for='(item,index) in levelGradeList' :key='index'>
        <div class='swipe-image'>
          <div class='swipe-text'>
            <div class='swipe-name'>
              {{ item.explain }}
            </div>
            <div class='swipe-zhekou'>
              可享受商品折扣 : {{ item.discount }} 折 <img class='icon' :src=item.icon>
            </div>
            <div>
              <div class='lock' v-if='item.grade > grade'>
                <text class='iconfont icon-quanxianguanlisuozi'></text>
                该会员等级尚未解锁
              </div>
              <div class='lock' v-if='item.grade < grade'>
                <text class='iconfont icon-xuanzhong1'></text>
                已解锁更高等级
              </div>
            </div>
          </div>
        </div>
        <img :src=item.image class='set-image'>
      </van-swipe-item>
    </van-swipe>
    <div class='wapper'>
      <van-icon class='icon-dia' name='diamond' />
      <span class='font'>会员升级要求</span>
      <div class=''>
        <van-cell-group inset v-for='(item,index) in levelTaskList' :key='index'>

          <van-cell :title=item.name :value=item.taskTypeTitle
                    :label="'当前值为：' + item.newNumber"
          >
          </van-cell>
        </van-cell-group>

      </div>
    </div>
    <van-divider
      :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
    >
      为你推荐
    </van-divider>
    <ProductList />
  </div>
</template>
<script>
import { levelDetection, levelGrade, levelTask } from '@/api/level.js'
import Vue from 'vue'
import { Progress } from 'vant'
import ProductList from '@/components/listProduct.vue'
import { getUserInfo } from '@/api/login.js'

Vue.use(Progress)
export default {
  components: {
    ProductList
  },
  data() {
    return {
      levelGradeList: [],
      islevel: '',
      levelTaskList: [],
      swipeIndex: 0,
      grade: 0
    }
  },
  methods: {
    getLevelGrade() {
      levelGrade().then(res => {
        this.levelGradeList = res.data.list
      })
    },
    onChange(index) {
      this.swipeIndex = index
      this.getLevelTask(this.swipeIndex)
     
      this.getLevelGrade()
    },
    getLevelTask(data) {
      levelTask(data).then(res => {
        this.levelTaskList = res.data.list
      })
    },
    getLevelDetection() {
      levelDetection().then(res => {
        // console.log(res);
      })
    },
    getUserInfo() {
      getUserInfo().then(res => {
        this.grade = res.data.level
        // console.log(res.data);
      })
    }

  },
  created() {
    this.onChange(this.swipeIndex)
    this.getUserInfo()
  }
}
</script>
<style>
.set-image {
  height: auto;
  width: auto \9;
  width: 100%;
}

.swipe-image {
  position: relative;
}

.swipe-text {
  position: absolute;
}

.swipe-name {
  font-size: 30px;
  color: rgb(255, 255, 255);
  font-weight: 700;
  padding: 21px 0 0 23px;
}

.swipe-zhekou {

  font-size: 18px;
  font-weight: 700;
  margin: 10px 0 0 23px;
  color: rgb(255, 255, 255);
}

.icon {
  text-align: center;
  vertical-align: middle;
  height: 20px;
  width: 20px;
}

.lock {
  font-size: 17px;
  margin: 48px 0 0 23px;
  color: rgb(255, 255, 255);
}

.wapper {
  background-color: #fff;
  padding-bottom: 10px;
  margin-bottom: 13px;
}

.font {
  height: 64px;
  padding: 0 8px;
  font-size: 19px;
  font-weight: 700;
  color: #282828;
  text-align: center;
}

.icon-dia {
  margin-left: 20px;
  text-align: center;
}
</style>
